<template>
    <div>
        <div class="page-body">
            <div class="page-header">
                <div class="page-title">
                    {{ cardData._卡券价格 }}
                </div>
                <div>{{ cardData.CouponName }} </div>
            </div>
            <div class="page-qr-yh">
                <div class="page-qr-yh-l"></div>
                <div class="page-qr-yh-r"></div>
                <div class="page-qr-yh-xian"></div>
            </div>
            <div class="page-content">
                <div class="page-contenttext">
                    <el-tag type="danger" v-if="cardData._isGq" style="margin-right:5px">已过期</el-tag>{{ cardData._有效期 }}
                </div>
            </div>
            <div class="page-footer" v-if="$slots.footer">
                <div class="page-footer-left">
                    <div v-if="stock">
                        剩余库存:{{ stock }}
                    </div>
                </div>
                <slot name="footer">
                </slot>
            </div>
        </div>
        <!-- {{ cmpCard }} -->
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: "ECardRuleCard",
})
</script>
  
<script lang="ts" setup>
import { DefaultProps } from "element-plus";
import { ref, nextTick } from "vue";
import { ECardRuleDataClass } from "@/model/ECardRule";


let props = withDefaults(defineProps<{
    cardData: ECardRuleDataClass,
    stock?: number
}>(), {
    stock: 0
})
</script>
  
<style lang="less" scoped>
@bgcolor: rgb(255, 255, 255);

.page-body {
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    transition: 0.2s;
    filter: drop-shadow(0 0px 0.5px rgba(0, 0, 0, 0.4));
    overflow: hidden;

    &:hover {
        filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 0.2));
    }
}

.page-header {
    padding: 10px;
    background-color: @bgcolor;
    text-align: center;

    &>img {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        margin-right: 10px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
}

.page-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--primaryColor);
    margin-bottom: 10px;
}


// 内凹圆环装饰
.page-qr-yh {
    @r: 10px;
    @top: 100px;

    position: relative;
    height: @r*2;
    width: 100%;
    background-clip: content-box;
    background-color: @bgcolor;
    padding: 0 (@r+1);

    .page-qr-yh-l {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: @r + 1px;
        height: 100%;
        background: radial-gradient(circle at left, transparent @r, @bgcolor @r + 1px);
    }

    .page-qr-yh-r {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: @r + 1px;
        height: 100%;
        background: radial-gradient(circle at right, transparent @r, @bgcolor @r + 1px);
    }

    .page-qr-yh-xian {
        height: 50%;
        width: 100%;
        border-bottom: 1px dashed black;
    }
}

.page-content {
    background-color: @bgcolor;
    padding: 10px;
    color: rgba(0, 0, 0, 0.5);
}

.page-footer {
    background-color: @bgcolor;
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-footer-left {
    font-size: 13px;
    margin-right: 10px;
}
</style>